<!-- 温世杰  文章审核 -->
<template>
  <!-- 文章审核 -->
  <div id="ArticleReview">
    <el-card style="margin-bottom: 10px">
      <el-input
        v-model="sousuoform.userName"
        style="width: 200px"
        placeholder="请输入用户名"
        suffix-icon="el-icon-user"
      ></el-input>
      <el-input
        v-model="sousuoform.articleTitle"
        style="width: 200px; margin-left: 5px"
        placeholder="请输入文章标题"
        suffix-icon="el-icon-tickets"
      ></el-input>
      <el-button
        class="custom-button ml-10"
        icon="el-icon-search"
        v-on:click="load()"
        >查询</el-button>
    </el-card>
    <!-- 表格区域 -->
    <el-card>
      <el-table
        :data="articleList"
        border
        stripe
        height="600"
        header-cell-class-name="headerBg"
      >
        <el-table-column prop="userName" label="发布者名" width="120" />
        <el-table-column
          prop="articleTitle"
          label="文章标题"
          width="200"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="images" label="图片" width="150">
          <template slot-scope="scope">
            <el-carousel height="150px" v-if="scope.row.images">
              <el-carousel-item
                v-for="item,index in scope.row.images.split(',')"
                :key="index"
              >
                <img height="100" width="100" :src="$imageUrl + item" />
              </el-carousel-item>
            </el-carousel>
            <el-tag v-else type="info">暂无数据</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="video" label="视频" width="150">
          <template slot-scope="scope">
            <el-carousel height="150px" v-if="scope.row.video">
              <el-carousel-item
                v-for="item,index in scope.row.video.split(',')"
                :key="index"
              >
                <video
                  height="100"
                  width="100"
                  :src="getVideoUrl(item)"
                  controls
                ></video>
              </el-carousel-item>
            </el-carousel>
            <el-tag v-else type="info">暂无数据</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publishTime" label="发布时间" width="160" />
        <el-table-column prop="approvalStatus" label="审核状态" width="120">
          <template slot-scope="scope">
            <el-tag effect="plain" v-if="scope.row.approvalStatus == 0"
              >待审核</el-tag
            >
            <el-tag
              effect="plain"
              class="pass_button"
              type="success"
              v-if="scope.row.approvalStatus == 1"
              >通过</el-tag
            >
            <el-tag
              effect="plain"
              type="danger"
              v-if="scope.row.approvalStatus == 2"
              >驳回</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="isHidden" label="隐藏发布" width="100">
          <template slot-scope="scope">
            <el-tag effect="dark" type="info" v-if="scope.row.isHidden == 1"
              >隐藏</el-tag
            >
            <el-tag effect="dark" type="danger" v-else>显示</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              class="pass_button"
              @click="examine(scope.row)"
              icon="el-icon-info"
              >详情
            </el-button>
            <el-button
              class="pass_button"
              @click="pass(scope.row)"
              icon="el-icon-check"
              >同意
            </el-button>
            <el-button
              class="pass_button"
              @click="update(scope.row)"
              icon="el-icon-close"
              >驳回</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      class="pageAll"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>

    <!-- 查看弹窗 -->
    <el-dialog title="文章详情" :visible.sync="lookwindows" width="50%">
      <el-descriptions :column="1" size="small" border>
        <el-descriptions-item label="文章标题" class="custom-description">
          {{ FormData.articleTitle }}
        </el-descriptions-item>
        <el-descriptions-item label="文章内容">
          <div v-html="FormData.articleContent"></div>
        </el-descriptions-item>
        <el-descriptions-item label="文章图片" v-if="FormData.images">
          <el-image
            style="width: 100px; height: 100px"
            v-for="(item, index) in FormData.images.split(',')"
            :key="index"
            :src="$imageUrl + item"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="文章视频" v-if="FormData.video">
          <video
            v-for="(item, index) in FormData.video.split(',')"
            :key="index"
            height="100"
            width="100"
            :src="getVideoUrl(item)"
            controls
          ></video>
        </el-descriptions-item>
        <el-descriptions-item label="文章标签">
          {{ FormData.dictLabel }}
        </el-descriptions-item>
        <el-descriptions-item label="发布时间">
          {{ FormData.publishTime }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <div v-if="FormData.approvalStatus === 0">待审核</div>
          <div v-if="FormData.approvalStatus === 1">审核成功</div>
          <div v-if="FormData.approvalStatus === 2">审核失败</div>
        </el-descriptions-item>
        <el-descriptions-item label="是否隐藏">
          <div v-if="FormData.isHidden === 1">是</div>
          <div v-if="FormData.isHidden === 2">否</div>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lookwindows = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 驳回弹窗 -->
    <el-dialog title="驳回详情" :visible.sync="lookwindowss" class="">
      <el-form :model="Form" label-width="100px">
        <el-form-item label="审核意见:" prop="auditComment">
          <el-input
            v-model="Form.auditComment"
            style="margin-top: 40px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lookwindowss = false">取 消</el-button>
        <el-button type="primary" @click="update('Form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import dateUtil from "../../util/date";
export default {
  name: "VideoTable",
  data() {
    return {
      DoctorUserId: "",
      lookwindowss: false,
      // 开关
      sortType: "", // 当前选中的排序类型，可选值为 'earliest' 或 'latest'
      // 文章列表
      articleList: [],
      allArticleList: [],
      currentPage4: 1, // 默认第几页
      pageNum: 1,
      pageSize: 5,
      trim: "",
      userId: "",
      total: 0,
      // 搜索条件
      sousuoform: {
        userName: "",
        articleTitle: "",
      },
      FormData: {
        images: "",
        video: "",
      },
      type: "check-person", // 系统信息
      avatarUrl: "",
      inceptId: 1,
      toUserId: "",
      checkType: 2,
      id: 0,
      type: "app", // 系统信息
      content: "您的文章已通过查看详情请查看文章管理",
      contents: "很抱歉您的文章经审核存在问题请重新更正后再次提交",
      auditform: {},
      Form: {
        auditComment: "",
        articleId: "",
        auditor: "",
      },
      // 查看窗口
      lookwindows: false,
    };
  },
  mounted() {
    this.load();
  },

  methods: {
    getVideoUrl(videoId) {
      return this.$videoUrl + videoId;
    },
    reject(row) {
      // 查询注销的用户信息详情
      this.title = "驳回原因";
      // this.lookwindowss = true;
      this.Form = row;
      this.Form.articleId = row.id; // 弹框回显获取文章id
      console.log(row.id);
      console.log(this.Form.articleId);
    },
    load() {
      // 文章审核多个模糊查
      this.$axios
        .get("/articleReview/getArticle", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            userName: this.sousuoform.userName,
            articleTitle: this.sousuoform.articleTitle,
          },
        })
        .then((res) => {
          this.articleList = res.data.data.content;
          this.total = res.data.data.totalSize;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSortChange() {
      // 根据排序类型重新加载数据或者重新排序文章列表
      if (this.sortType === "earliest") {
        // 执行最早排序的操作
        this.articleList.sort(
          (a, b) => new Date(a.publishTime) - new Date(b.publishTime)
        );
      } else if (this.sortType === "latest") {
        // 执行最晚排序的操作
        this.articleList.sort(
          (a, b) => new Date(b.publishTime) - new Date(a.publishTime)
        );
      } else {
        this.load();
      }
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    pass(data) {
      this.$confirm("此操将同意该文章发布, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 审核通过
          const from = {
            auditor: window.sessionStorage.getItem("loginName"), // 当前登录者
            id: data.id, // 医师id
          };
          this.$axios
            .post("/articleReview/addArticleStatus", from)
            .then((res) => {
              if (res.data.flag) {
                this.myMessage("success", "操作成功"); // 添加或修改成功提示
                this.lookwindows = false; // 关闭窗口
                this.load();
                this.$axios
                  .get("/physician/getPhysicianUserid", {
                    params: {
                      id: data.userId,
                    },
                  })
                  .then((res) => {
                    this.DoctorUserId = res.data.data;
                    this.sendMsgs(this.DoctorUserId);
                  });
              } else {
                this.myMessage("warning", res.data.code);
              }
            })
            .catch((err) => {
              console.log(err);
              this.myMessage("warning", "对不起，保存失败，请您稍后再试！"); // 添加或修改失败
            });
        })
        .catch(() => {});
    },

    // 驳回审核
    update(data) {
      this.$prompt("请输入驳回原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          const from = {
            auditor: window.sessionStorage.getItem("loginName"), // 当前登录者
            id: data.id, // 医师id
            auditComment: value,
          };
          this.$axios
            .post("/articleReview/addArticleUpdate", from)
            .then((res) => {
              if (res.data.flag) {
                this.myMessage("success", "操作成功"); // 添加或修改成功提示
                this.$axios
                  .get("/physician/getPhysicianUserid", {
                    params: {
                      id: data.userId,
                    },
                  })
                  .then((res) => {
                    this.DoctorUserId = res.data.data;
                    this.sendMsg(this.DoctorUserId, value);
                  });
                this.lookwindowss = false; // 关闭窗口
                this.load();
              } else {
                this.myMessage("warning", res.data.code);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },

    // 发送消息 通过
    sendMsgs(DoctorUserId) {
      if (this.content.trim() !== "") {
        const lt = {
          toUserId: DoctorUserId, // 发送人
          checkReason: this.content, // 发送信息内容
          checkType: this.checkType,
          uuid: this.DoctorUserId + uuidv4(),
          createTime: dateUtil.getMinuteNow(), // 获取现在时间
          type: "check-person",
          isRead: 0,
        };
        // 发送消息
        this.$websocket.ws.send(JSON.stringify(lt));
      } else {
        this.$message("不能发送空消息", "warning");
        // 清除文本框空格
        this.content = this.content.trim();
      }
    },

    // 发送消息  不通过
    sendMsg(userId, text) {
      if (this.contents.trim() !== "") {
        const lt = {
          toUserId: userId, // 发送人
          checkReason: this.contents + ",原因是：" + text, // 发送信息内容
          checkType: this.checkType,
          uuid: this.userId + uuidv4(),
          createTime: dateUtil.getMinuteNow(), // 获取现在时间
          type: "check-person",
          isRead: 0,
        };
        // 发送消息
        this.$websocket.ws.send(JSON.stringify(lt));
      } else {
        this.message("不能发送空消息", "warning");
        // 清除文本框空格
        this.content = this.content.trim();
      }
    },

    // 查看单行
    examine(row) {
      this.lookwindows = true;
      this.FormData = JSON.parse(JSON.stringify(row));
      // console.log(this.FormData);
      // this.doctorName = row.doctorName;
    },
    // 清空搜索框
    reset() {
      this.sousuoform.doctorName = "";
      this.sousuoform.articleTitle = "";
      this.sortType = "";
      this.load();
    },
    handleSizeChange(val) {
      // 改变每页条数
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      // 改变当前页
      this.pageNum = val;
      this.load();
    },
  },
};
</script>

<style>
/*审批通过按钮 */
.pass_button {
  background-color: #d4f8f1; /* 设置按钮的背景颜色 */
  color: #2cd3b5; /* 设置按钮里的字体颜色 */
  border-color: #d4f8f1; /* 设置按钮的边框颜色 */
}
.custom-button {
  background-color: #2cd3b5; /* 设置按钮的背景颜色 */
  color: #fff; /* 设置按钮里的字体颜色 */
  border-color: #2cd3b5; /* 设置按钮的边框颜色 */
}
.custom-buttonT {
  background-color: #ffff; /* 设置按钮的背景颜色 */
  color: #2cd3b5; /* 设置按钮里的字体颜色 */
  border-color: #2cd3b5; /* 设置按钮的边框颜色 */
}
/*分页*/
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2cd3b5;
  color: #fff;
}
.el-table td.el-table__cell div {
  height: 95px;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.chsry {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 用省略号代替溢出的内容 */
  width: 800px; /* 例如：限制文本显示宽度为200px */
  height: 50px;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2cd3b5;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #2cd3b5;
}
.class_dialog_hospital {
  width: 100%;
}
/*标题样式*/
.class_dialog_hospital .el-dialog__title {
  font-size: 14px;
}
/*头区样式*/
.class_dialog_hospital .el-dialog__header {
  height: 26px;
  background: #e6e6e6;
  padding: 4px 0 4px 10px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

/*头区退出按钮样式*/
.class_dialog_hospital .el-dialog__headerbtn {
  top: 10px;
  right: 10px;
  font-size: 16px;
}

/*对话框区*/
.class_dialog_hospital .el-dialog {
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 4px #e6e6e6;
  border-radius: 9px;
  padding: 0;
}

/*内容区*/
.class_dialog_hospital .el-dialog__body {
  padding: 0;
}

/*脚区*/
.class_dialog_hospital .el-dialog__footer {
  border-top: 2px solid #e8eaec;
  height: 54px;
  font-weight: bolder;
}
/* 弹窗样式*/
/* 弹窗样式*/
::v-deep.el-form-item__label {
  width: 300px;
}
</style>
